/* Match the existing square, black-and-white editor panels. */
[data-pet-colors]{box-sizing:border-box;display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:8px 12px;width:100%;min-width:0;border:2px solid #111;background:#f7f7f7;padding:10px;margin:12px 0;font:900 11px/1.3 'Courier New',monospace;color:#111}
[data-pet-colors] strong{display:grid;gap:3px;white-space:nowrap;font:900 13px/1.2 'Courier New',monospace}
[data-pet-colors] strong::before{content:'COLOR COUNT';font-size:8px;letter-spacing:.4px}
.pet-color-chips{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0}
.pet-color-chips span{box-sizing:border-box;flex:0 0 22px;width:22px;height:22px;border:2px solid #111;box-shadow:inset 1px 1px 0 #ffffff80;display:block}
[data-pet-colors] small{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;border-top:1px solid #111;padding-top:7px;font:700 10px/1.5 'Courier New',monospace;color:#555}
[data-pet-colors].over-limit small{color:#111;font-weight:900}
.pet-color-warning{display:inline-block;padding:3px 6px;border:1px solid #111;background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:900;animation:pet-color-alert 1.8s ease-in-out infinite}
@keyframes pet-color-alert{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.pet-color-warning{animation:none}}
/* Four columns × three complete rows; subsequent choices scroll inside. */
@media(min-width:961px){#options{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:104px;gap:7px;max-height:328px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}}
[data-builtin-colors]{box-sizing:border-box;display:flex;flex-wrap:wrap;gap:8px 16px;border:2px solid #111;background:#f7f7f7;padding:10px;margin:12px 0;font:900 10px 'Courier New',monospace}
[data-builtin-colors][hidden]{display:none}
[data-builtin-colors] label{display:grid;grid-template-columns:auto 32px;align-items:center;gap:8px}
[data-builtin-colors] input{box-sizing:border-box;width:32px;height:30px;border:2px solid #111;padding:2px;border-radius:0;appearance:none;-webkit-appearance:none;background:#fff}
@media(max-width:960px){
  [data-pet-colors]{grid-template-columns:70px minmax(0,1fr);padding:7px;margin:8px 0;gap:6px 8px}
  [data-pet-colors] strong{font-size:11px}
  [data-pet-colors] strong::before{font-size:7px}
  .pet-color-chips{gap:4px}
  .pet-color-chips span{flex-basis:18px;width:18px;height:18px}
  [data-pet-colors] small{font-size:9px;padding-top:5px}
  [data-builtin-colors]{padding:7px;margin:8px 0;gap:7px 12px}
}
@media(max-width:600px){
  /* Keep the mode row in normal flow: a viewport-based sticky offset overlapped categories. */
  #mobileModebar{position:relative;top:auto}
  /* Fit the complete embroidery note on one line inside the phone panel. */
  [data-pet-colors] small{flex-wrap:nowrap;white-space:nowrap;min-width:0;gap:4px;font-size:min(8px,2vw);overflow:visible}
  [data-pet-colors] small>span{flex:0 0 auto}
  [data-pet-colors] .pet-color-warning{padding:3px}
}