.pattern-colors-wrap{padding:24px 0 60px}.pattern-colors-layout{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start;max-width:var(--max);margin:0 auto;padding:0 24px}.color-palette{display:flex;flex-wrap:wrap;gap:8px}.color-swatch{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s;flex-shrink:0}.color-swatch.selected{border-color:var(--text);transform:scale(1.15)}.color-swatch:hover{transform:scale(1.1)}.pattern-colors-main{display:flex;flex-direction:column;gap:20px}.pattern-colors-grid{display:flex;flex-direction:column;gap:4px;width:-moz-max-content;width:max-content;max-width:100%}.pattern-colors-row{display:flex;gap:4px}.pattern-cell{width:40px;height:40px;border-radius:8px;border:2px solid rgba(38,38,38,.15);cursor:pointer;background:#f9f9f9;transition:transform .12s,border-color .12s,box-shadow .12s;flex-shrink:0}.pattern-cell.locked{cursor:default;border-color:rgba(38,38,38,.25);opacity:.95}.pattern-cell:not(.locked):hover{transform:scale(1.08);border-color:var(--brand-orange);box-shadow:0 0 0 3px rgba(255,152,0,.2)}.pattern-cell.wrong{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.25);animation:shake .3s ease}.pattern-cell.selected{box-shadow:0 0 0 3px rgba(255,152,0,.4)}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@media (max-width:900px){.pattern-colors-layout{grid-template-columns:1fr}}@media (max-width:640px){.pattern-cell{width:30px;height:30px}.pattern-colors-layout{padding:0 12px}}