/* =====================================================
   color-picker.css — Premium Color Picker Styling
   Optimized for large desktop screens (constrained height)
   ===================================================== */

.dt-main {
  padding-top: 0;
  min-height: calc(100vh - 70px - 100px);
  background-color: var(--bg-primary);
}

.dt-section {
  padding: 20px 0 60px;
}



.dt-tool-header {
  margin-bottom: 24px;
}

.dt-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--purple-500);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.dt-back-link:hover {
  color: var(--lavender-300);
  transform: translateX(-2px);
}

.dt-back-link svg, .dt-back-link img ,.dt-back-link .icon, .dt-back-link .icon {
  width: 16px;
  height: 16px;
}

.dt-title-large {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.dt-subtitle-text {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0;
  line-height: 1.4;
}

/* Suite Tab Navigation Bar */
.dt-suite-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 6px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  
  /* Responsive horizontal scrollable tabs */
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome/Safari/Opera */
.dt-suite-nav::-webkit-scrollbar {
  display: none;
}

.dt-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  text-decoration: none;
  flex-shrink: 0; /* Prevent squashing on scrollable layouts */
}

.dt-nav-tab svg, .dt-nav-tab img ,.dt-nav-tab .icon, .dt-nav-tab .icon {
  width: 16px;
  height: 16px;
}

.dt-nav-tab:hover {
  color: var(--purple-500);
  background: rgba(139, 92, 246, 0.04);
}

.dt-nav-tab.active {
  background: var(--gradient-primary);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

/* Split Workspace Panel - Constrained Height to Fit Screen */
.dt-workspace {
  display: grid;
  grid-template-columns: 1fr minmax(0, 480px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  height: 750px; /* Fully visible on average desktop screen sizes (increased to fit Shades/Tints) */
}

/* Left Panel styling */
.dt-left-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
  overflow: hidden;
  position: relative;
}

.dt-left-panel-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dt-block-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Workspace Toggles */
.dt-workspace-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
}

.dt-workspace-mode-toggles {
  display: flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 3px;
  border-radius: var(--radius-sm);
  gap: 4px;
}

.dt-header-eyedropper-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dt-header-eyedropper-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--purple-500);
  color: var(--purple-500);
}

.dt-header-eyedropper-btn svg, .dt-header-eyedropper-btn img ,.dt-header-eyedropper-btn .icon, .dt-header-eyedropper-btn .icon {
  width: 12px;
  height: 12px;
}

@media (max-width: 768px) {
.dt-suite-nav {
    width: auto !important;
    max-width: 100% !important;
    gap: 6px !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .dt-nav-tab {
    flex: 0 0 auto !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    font-size: 0.84rem !important;
    gap: 6px !important;
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  .dt-nav-tab svg, .dt-nav-tab img, .dt-nav-tab .icon {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  .dt-header-eyedropper-btn span:not(.icon) {
    display: none;
  }
  .dt-header-eyedropper-btn {
    padding: 6px 8px;
  }
}

.dt-mode-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dt-mode-toggle-btn:hover {
  color: var(--purple-500);
}

.dt-mode-toggle-btn.active {
  background: var(--bg-card);
  color: var(--purple-500);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 993px) and (max-width: 1350px) {
.dt-mode-toggle-btn {
    padding: 6px 8px;
    font-size: 0.72rem;
  }
  .dt-header-eyedropper-btn {
    padding: 6px 8px;
    font-size: 0.72rem;
  }
}

/* Right panel shrinks, left preview stays wide — right panel only shows text so 280px is plenty */
@media (min-width: 993px) and (max-width: 1060px) {
.dt-workspace {
    grid-template-columns: 1fr minmax(0, 260px);
  }
}

@media (min-width: 1061px) and (max-width: 1180px) {
.dt-workspace {
    grid-template-columns: 1fr minmax(0, 300px);
  }
}

@media (min-width: 1181px) and (max-width: 1280px) {
.dt-workspace {
    grid-template-columns: 1fr minmax(0, 340px);
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
.dt-header-eyedropper-btn span:not(.icon) {
    display: none;
  }
}

/* Tighten right panel internal padding at intermediate widths (text codes fit fine in smaller space) */
@media (min-width: 993px) and (max-width: 1280px) {
.dt-right-panel > .dt-block-title {
    padding: 12px 14px 0;
  }
  .dt-color-previews-group {
    padding: 12px 14px;
    gap: 10px;
  }
  .dt-formats-list {
    padding: 12px 14px;
    gap: 8px;
  }
  .dt-format-card-inline {
    padding: 3px 6px 3px 10px;
    gap: 6px;
  }
  .dt-format-label-inline {
    width: 38px;
    font-size: 0.72rem;
  }
  .dt-format-val-inline {
    font-size: 0.82rem;
  }
  .dt-copy-btn-inline {
    width: 30px;
    height: 30px;
  }
  .dt-shades-tints-section {
    padding: 10px 14px;
  }
  .dt-color-preview-small {
    width: 54px;
    min-width: 54px;
    height: 54px;
  }
}

/* Canvas Area Wrapper - Takes available space between block title and palette builder */
.dt-canvas-area-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
}

/* Drag & Drop Area */
.dt-dropzone {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: pointer;
  background: var(--bg-primary);
  transition: background var(--transition-normal);
}

.dt-dropzone.dragover {
  background: rgba(139, 92, 246, 0.05);
}

.dt-dropzone-inner {
  text-align: center;
  max-width: 420px;
}

.dt-illustration {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--purple-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: transform var(--transition-normal);
}

.dt-dropzone:hover .dt-illustration {
  transform: scale(1.08);
}

.dt-illustration svg, .dt-illustration img ,.dt-illustration .icon, .dt-illustration .icon {
  width: 24px;
  height: 24px;
}

.dt-upload-prompt {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.dt-browse-link {
  color: var(--purple-500);
  text-decoration: underline;
}

.dt-sample-images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.dt-sample-images span {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.dt-sample-btn {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dt-sample-btn:hover {
  border-color: var(--purple-500);
  color: var(--purple-600);
  background: var(--bg-tertiary);
}

/* Canvas Box - Fits image perfectly without scrollbar */
.dt-canvas-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
}

#dt-image-canvas {
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: var(--shadow-lg);
  border-radius: 4px;
  cursor: crosshair;
  background-image: repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0% 25%, transparent 0% 50%);
  background-size: 16px 16px;
  display: block;
}

/* Floating Magnifier Loupe centered above cursor */
#dt-floating-loupe {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1.5px var(--purple-500), 0 8px 24px rgba(124, 58, 237, 0.25);
  pointer-events: none;
  display: none;
  z-index: 100;
  transform: translate(-50%, -120%); /* Floats directly above pointer */
}

/* Custom Color Picker Mode Panel (Left Workspace) */
.dt-wheel-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  position: relative;
}

.dt-custom-picker-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 328px;
  margin: 0 auto;
  box-sizing: border-box;
}

.dt-sb-container {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 200px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: crosshair;
  border: 1px solid var(--border);
  margin: 0 auto;
}

#dt-sb-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.dt-sb-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.dt-picker-controls-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dt-picker-hex-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}

.dt-picker-hex-input-row .dt-slider-label {
  margin: 0;
  flex-shrink: 0;
  width: 44px;
}

.dt-wheel-hex-input {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  outline: none;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dt-wheel-hex-input:focus {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

.dt-slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-slider-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Color Sliders styling */
.dt-color-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  outline: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.dt-color-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--purple-500);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.dt-color-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.hue-slider {
  background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.value-slider {
  /* Dynamic gradient back-fill managed in JS */
  background: linear-gradient(to right, #000000, #ffffff);
}

/* Color Palette Builder row below canvas */
.dt-palette-builder-section {
  padding: 14px 24px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.dt-palette-builder-section .dt-block-title {
  padding: 0 0 8px;
  border-bottom: none;
  background: transparent;
  font-size: 0.8rem;
}

.dt-palette-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-palette-action-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.dt-palette-action-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--purple-500);
  color: var(--purple-500);
}

.dt-palette-action-btn svg, .dt-palette-action-btn img ,.dt-palette-action-btn .icon, .dt-palette-action-btn .icon {
  width: 16px;
  height: 16px;
}

.dt-palette-swatches-band {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 6px;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dt-palette-swatches-band::-webkit-scrollbar {
  display: none;
}

/* Individual swatch in the color palette band */
.dt-palette-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  flex-shrink: 0;
}

.dt-palette-swatch:hover {
  transform: scale(1.15);
  z-index: 5;
}

.dt-palette-swatch.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px var(--purple-500);
}

/* Export Dropup menu styles */
.dt-export-wrapper {
  position: relative;
}

.dt-export-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 120;
  width: 120px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.dt-export-dropdown.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dt-export-dropdown button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dt-export-dropdown button:hover {
  background: rgba(139, 92, 246, 0.08);
  color: var(--purple-500);
}

/* Right Panel styling */
.dt-right-panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  overflow-y: auto;
  position: relative;
  height: 100%;
  min-width: 0; /* Allow the right panel to shrink below its content size in grid */
  width: 100%; /* Ensure it fills its grid column fully */
}

.dt-right-panel > .dt-block-title {
  padding: 16px 24px 0;
}

/* Previews Group (Current & Previous color side by side) */
.dt-color-previews-group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap; /* keep current + previous on same row */
  min-width: 0;
}

.dt-color-preview-big {
  flex: 1;
  min-width: 0; /* Allow shrinking */
  height: 70px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.dt-color-preview-big:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.dt-color-preview-small {
  width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.dt-color-preview-small:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.dt-color-preview-small::after {
  content: 'Previous';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
}

/* Color Format Inline List */
.dt-formats-list {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dt-format-card-inline {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 6px 4px 12px; /* custom padding for perfectly centered 36px button */
  gap: 8px;
  overflow: hidden; /* Clip the scrolling value text at card edges */
}

.dt-format-label-inline {
  width: 44px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.dt-format-val-inline {
  flex: 1;
  min-width: 0; /* Allow shrinking in grid/flex container */
  overflow-x: auto;   /* Horizontally scrollable */
  overflow-y: hidden;
  white-space: nowrap; /* Keep value on one line */
  -webkit-overflow-scrolling: touch; /* Smooth momentum scroll on iOS */
  scrollbar-width: none; /* Firefox — hide scrollbar */
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  padding: 6px 0; /* vertical padding for comfortable touch target */
  cursor: default;
}

/* Chrome/Safari/Opera — hide scrollbar but keep scroll functionality */
.dt-format-val-inline::-webkit-scrollbar {
  display: none;
}

.dt-copy-btn-inline {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.dt-copy-btn-inline:hover {
  background: var(--bg-tertiary);
  color: var(--purple-500);
}

.dt-copy-btn-inline svg, .dt-copy-btn-inline img ,.dt-copy-btn-inline .icon, .dt-copy-btn-inline .icon {
  width: 15px;
  height: 15px;
}

/* Copy Toast message */
.dt-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1.5px solid var(--border);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-toast::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.dt-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* dragover outline styling for canvas container */
.dt-canvas-box.dragover {
  border: 2px dashed var(--purple-500);
  background: rgba(139, 92, 246, 0.05);
}

/* Shades & Tints section styles (left panel bottom) */
.dt-shades-tints-section {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}

.dt-shades-tints-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

.dt-shades-tints-row-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-shades-tints-row-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.dt-shades-tints-row {
  display: flex;
  gap: 4px;
  justify-content: space-between;
}

.dt-shades-tints-swatch {
  flex: 1;
  height: 32px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}

/* Swatch hover is wrapped inside media query at the bottom to prevent sticky hover states on mobile/tablet */

.dt-shades-tints-swatch-label {
  font-size: 0.6rem;
  font-family: var(--font-mono);
  font-weight: 700;
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
}

/* Custom Dropzone upload button and samples styling */
.dt-dropzone-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 12px 0 20px;
}

.dt-dropzone-upload-btn {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--gradient-primary);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.dt-dropzone-upload-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.dt-dropzone-eyedropper-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.dt-dropzone-eyedropper-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--purple-500);
  color: var(--purple-500);
  transform: translateY(-1px);
}

.dt-dropzone-eyedropper-btn svg, .dt-dropzone-eyedropper-btn img ,.dt-dropzone-eyedropper-btn .icon, .dt-dropzone-eyedropper-btn .icon {
  width: 16px;
  height: 16px;
}

.dt-dropzone-samples {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.dt-dropzone-samples-title {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

.dt-dropzone-samples-row {
  display: flex;
  gap: 8px;
}

/* =====================================================
   Responsiveness & Mobile-First Media Queries
   ===================================================== */

@media (max-width: 992px) {
.dt-section {
    padding: 24px 0 40px;
  }



  .dt-tool-header {
    margin-bottom: 16px;
  }

  .dt-suite-nav {
    margin-bottom: 16px;
  }
  
  .dt-workspace {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: auto;
  }
  
  /* Expose children directly to the flexbox dt-workspace container for order placement */
  .dt-left-panel,
  .dt-right-panel {
    display: contents;
  }

  /* 2. Workspace Header (toggles) */
  .dt-left-panel-header {
    order: 2;
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
  }

  /* 3. Canvas Area Wrapper */
  .dt-canvas-area-wrapper {
    order: 3;
    height: auto;
    min-height: auto;
    flex: none;
    border-bottom: 1px solid var(--border);
  }
  
  .dt-wheel-box {
    height: auto;
    min-height: 440px;
    flex: none;
  }

  /* Decent canvas margin/padding for mobile viewports */
  .dt-canvas-box {
    padding: 2px;
    height: 340px; /* Constrain image canvas container height */
    box-sizing: border-box;
  }

  .dt-dropzone {
    height: 340px; /* Consistently align dropzone to the same height */
    padding: 24px;
    box-sizing: border-box;
  }

  /* 4. Dominant Colors section */
  .dt-palette-builder-section {
    order: 4;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
  }

  /* 5. Colors Title block (heading of previews/formats) */
  .dt-right-panel > .dt-block-title {
    order: 5;
    display: block !important;
    padding: 16px 20px 0 !important;
    background: var(--bg-card);
  }

  /* 6. Color Previews group */
  .dt-color-previews-group {
    order: 6;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
  }

  /* 7. Formats List */
  .dt-formats-list {
    order: 7;
    padding: 16px;
    gap: 8px;
  }

  /* 8. Shades & Tints Section on bottom */
  .dt-shades-tints-section {
    order: 8;
    border-top: 1px solid var(--border);
    padding: 12px 16px;
  }

  /* Premium mobile/tablet button sizing & swatches padding upgrades */
  .dt-mode-toggle-btn {
    font-size: 0.82rem;
    padding: 8px 16px;
  }
  
  .dt-header-eyedropper-btn {
    font-size: 0.82rem;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
  }

  .dt-palette-swatches-band {
    height: 48px;
    min-height: 48px;
    padding: 4px 8px;
    overflow-y: hidden;
  }

  .dt-palette-swatch {
    width: 36px;
    height: 36px;
  }

  .dt-shades-tints-swatch {
    height: 38px;
  }

  .dt-format-card-inline {
    padding: 6px 8px 6px 14px;
    border-radius: var(--radius-md);
  }
  
  .dt-format-val-inline {
    font-size: 0.92rem;
  }
  
  .dt-format-label-inline {
    font-size: 0.82rem;
  }

  .dt-block-title {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }
}

@media (max-width: 768px) {
.dt-title-large {
    font-size: 1.8rem;
  }
  
  .dt-subtitle-text {
    font-size: 0.95rem;
  }

  /* Centered copy acknowledgment toast for mobile/tablet */
  .dt-toast {
    bottom: 20px;
    left: 50%;
    right: auto;
    transform: translate(-50%, 12px);
    width: max-content;
    max-width: calc(100% - 32px);
    justify-content: center;
  }
  .dt-toast.show {
    transform: translate(-50%, 0);
  }
}

@media (max-width: 576px) {
.dt-section {
    padding: 16px 0 30px;
  }


  
  /* Stack Workspace Header vertically to make space for title and full-width buttons */
  .dt-left-panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }
  
  .dt-left-panel-header .dt-block-title {
    display: block !important;
  }
  
  .dt-workspace-header-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .dt-canvas-area-wrapper {
    height: auto;
    min-height: auto;
  }
  
  .dt-wheel-box {
    height: auto;
    min-height: 440px;
  }

  /* Decent canvas margin/padding further on tiny mobile screens */
  .dt-canvas-box {
    padding: 0px;
    height: 300px; /* Constrain image canvas container further on smaller mobile screens */
    box-sizing: border-box;
  }

  .dt-dropzone {
    height: 300px;
    padding: 16px;
    box-sizing: border-box;
  }
  
  /* Stack dropzone upload action buttons */
  .dt-dropzone-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 8px 0 16px;
    width: 100%;
  }
  
  .dt-dropzone-upload-btn,
  .dt-dropzone-eyedropper-btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Reorder dominant colors row: swatches scrollable band on top, controls centered below */
  .dt-palette-controls-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  
  .dt-palette-swatches-band {
    width: 100%;
    flex: none;
    order: -1;
    margin-bottom: 4px;
    height: 48px;
    min-height: 48px;
    padding: 4px 8px;
    overflow-y: hidden;
  }
  
  .dt-right-panel > .dt-block-title {
    padding: 12px 12px 0 !important;
  }
}

@media (max-width: 400px) {
.dt-canvas-area-wrapper {
    min-height: auto;
  }

  .dt-wheel-box {
    min-height: 360px;
  }

  .dt-canvas-box {
    height: 260px;
  }

  .dt-dropzone {
    height: 260px;
  }

  /* Shrink color picker container slightly to fit 320px screens perfectly */
  .dt-custom-picker-container {
    padding: 14px;
    width: 100%;
    max-width: 290px;
    gap: 14px;
  }
  
  .dt-sb-container {
    height: 160px;
  }
}

/* Prevent sticky hover states on touch screens for shades/tints swatches */
@media (hover: hover) {
.dt-shades-tints-swatch:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-sm);
    z-index: 2;
  }
}


/* Neutralize legacy tool toast classes to defer to global toast system */
.copy-toast, .qr-toast, .dt-toast, .toast-msg { display: none !important; }