/* Color samples are decorative; names and exercises remain readable without color. */
.run-code.cs-colors .cl-palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 14px; margin: 22px 0; padding: 0; list-style: none; }
.run-code.cs-colors .cl-palette > li { min-width: 0; margin: 0; padding: 0 12px 14px !important; border: 1px solid #d1daca; border-radius: 9px; overflow: hidden; background: #fff; line-height: 1.5; }
.run-code.cs-colors .cl-palette > li::before { content: none !important; display: none !important; }
.run-code.cs-colors .cl-swatch { display: block; height: 48px; margin: 0 -12px 12px; border-bottom: 1px solid #d1daca; background: var(--cl-color); }
.run-code.cs-colors .cl-palette a { display: inline-block; font-size: 18px; font-weight: 600; }
.run-code.cs-colors .cl-ipa { display: block; margin: 4px 0; color: #58675c; font-size: 14px; white-space: nowrap; }
.run-code.cs-colors .cl-translation { display: block; font-size: 15px; }
.run-code.cs-colors .cl-forms { min-width: 500px; }
@media (max-width: 600px) {
  .run-code.cs-colors .cl-palette { gap: 12px; }
  .run-code.cs-colors .cl-palette a { font-size: 17px; }
}
@media (forced-colors: active) {
  .run-code.cs-colors .cl-swatch { border: 1px solid CanvasText; }
}
@media print {
  .run-code.cs-colors .cl-palette { grid-template-columns: repeat(4, 1fr); }
  .run-code.cs-colors .cl-forms { min-width: 0; }
}