/* RapidTables-level RGB / color chart UI */
.color-page-tools { display: grid; gap: 18px; }
.rt-tool-h {
  margin: 0 0 8px; font-size: 16px; font-weight: 700;
  border-bottom: 1px solid #ddd; padding-bottom: 4px;
}
.cp-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start;
}
#cp-sv, #cp-hue {
  border: 1px solid #999; cursor: crosshair; display: block; touch-action: none;
  background: #fff;
}
#cp-hue { cursor: ns-resize; }
.cp-side { display: grid; gap: 6px; min-width: 140px; }
.cp-result {
  width: 120px; height: 72px; border: 1px solid #999;
  border-radius: 2px; background: #0d9488;
}
.cp-side label {
  display: grid; grid-template-columns: 36px 1fr; gap: 6px;
  align-items: center; font-size: 12px; font-weight: 700; margin: 0;
}
.cp-side input {
  border: 1px solid #bbb; border-radius: 3px; padding: 4px 6px; font-size: 13px; width: 100%;
}
.cp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.cp-actions button { font-size: 13px; padding: 8px 14px; border-radius: 8px; min-width: 110px; font-weight: 700; }

.web-palette {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  max-width: 420px;
}
.web-palette button {
  aspect-ratio: 1; border: 1px solid #888; padding: 0; cursor: pointer; border-radius: 1px;
}
.web-palette button:hover, .web-palette button:focus { outline: 2px solid #ff6b1a; outline-offset: 1px; z-index: 1; }
.palette-fields {
  display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr));
  gap: 8px; margin-top: 8px; max-width: 420px;
}
.palette-fields label { font-size: 12px; font-weight: 700; display: grid; gap: 2px; margin: 0; }
.palette-fields input { border: 1px solid #bbb; border-radius: 3px; padding: 4px 6px; font-size: 13px; }

.mixer-block { max-width: 480px; }
.mixer-block label {
  display: flex; justify-content: space-between; font-size: 12px; font-weight: 700;
  margin: 6px 0 2px;
}
.mixer-block input[type="range"] { width: 100%; }
.mixer-preview {
  margin-top: 8px; height: 56px; border: 1px solid #999;
  border-radius: 2px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; font-family: Consolas, monospace;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
.mixer-nums {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px;
}
.mixer-nums input { border: 1px solid #bbb; border-radius: 3px; padding: 4px 6px; width: 100%; }

.color-table-wrap { margin: 14px 0 22px; overflow-x: auto; }
.color-table {
  width: 100%; border-collapse: collapse; background: #fff; font-size: 13px;
}
.color-table th, .color-table td {
  border: 1px solid #ccc; padding: 8px 14px; border-radius: 8px; min-width: 110px; font-weight: 700; text-align: left; vertical-align: middle;
}
.color-table th { background: #f3f3f3; font-weight: 700; }
.color-swatch {
  display: inline-block; width: 56px; height: 22px; border: 1px solid #888; vertical-align: middle;
}
.color-table tr { cursor: pointer; }
.color-table tr:hover { background: #f7f7e8; }
.color-table code { font-size: 12px; }

.color-formula-box {
  background: #fffef5; border: 1px solid #e0d9a8; padding: 10px 12px;
  margin: 10px 0; font-size: 13px; line-height: 1.5;
}
.color-howto { font-size: 13px; line-height: 1.55; }
.color-howto ol { margin: 6px 0 0 18px; padding: 0; }

/* Color scheme generator (RapidTables-style sequence) */
.sg-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 20px;
  align-items: start;
}
.sg-left { display: grid; gap: 10px; }
#sg-wheel {
  width: 220px; height: 220px; border: 1px solid #999;
  border-radius: 50%; cursor: crosshair; display: block; touch-action: none;
}
#sg-preview {
  width: 120px; height: 72px; border: 1px solid #999; border-radius: 2px;
}
.sg-sliders label {
  display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin: 6px 0 2px;
}
.sg-sliders input[type="range"] { width: 100%; }
.sg-fields { display: grid; gap: 8px; max-width: 260px; }
.sg-fields label {
  display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center;
  font-size: 12px; font-weight: 700; margin: 0;
}
.sg-fields input {
  border: 1px solid #bbb; border-radius: 3px; padding: 5px 7px; font-size: 13px; width: 100%;
}
.sg-scheme-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 10px;
  align-items: center; margin-bottom: 8px;
}
.sg-scheme-name { font-size: 13px; font-weight: 600; }
.sg-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.sg-swatch {
  width: 36px; height: 28px; border: 1px solid #888; border-radius: 2px;
  padding: 0; cursor: pointer;
}
.sg-swatch:hover { outline: 2px solid #ff6b1a; outline-offset: 1px; }
.sg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.color-focus-row {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin: 10px 0 14px; font-size: 14px;
}
.color-focus-row strong { margin-right: 4px; }
#focus-swatch {
  width: 72px; height: 40px; border: 1px solid #888; display: inline-block; vertical-align: middle;
}

@media (max-width: 576px) {
  .web-palette { grid-template-columns: repeat(8, 1fr); max-width: 100%; }
  .palette-fields { grid-template-columns: 1fr 1fr; }
  #cp-sv { width: 160px; height: 160px; }
  #cp-hue { height: 160px; }
  .sg-layout { grid-template-columns: 1fr; }
  .sg-scheme-row { grid-template-columns: 1fr; }
}