.ColorConverterClient-module__xHJfOa__container{width:100%;padding:24px 0}.ColorConverterClient-module__xHJfOa__card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:24px;grid-template-columns:1fr 1fr;gap:40px;max-width:900px;margin:0 auto;padding:32px;display:grid;box-shadow:0 10px 30px #0000000d}@media (max-width:768px){.ColorConverterClient-module__xHJfOa__card{grid-template-columns:1fr;gap:32px}}.ColorConverterClient-module__xHJfOa__leftCol,.ColorConverterClient-module__xHJfOa__rightCol{flex-direction:column;gap:24px;display:flex}.ColorConverterClient-module__xHJfOa__colorSwatch{border:1px solid var(--border-color);border-radius:12px;justify-content:center;align-items:center;width:100%;height:120px;transition:background-color .2s;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #0000001a}.ColorConverterClient-module__xHJfOa__checkerboard{background-image:linear-gradient(45deg, var(--border-color) 25%, transparent 25%), linear-gradient(-45deg, var(--border-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border-color) 75%), linear-gradient(-45deg, transparent 75%, var(--border-color) 75%);z-index:1;opacity:.3;background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;position:absolute;inset:0}.ColorConverterClient-module__xHJfOa__swatchColor{z-index:2;position:absolute;inset:0}.ColorConverterClient-module__xHJfOa__pickerWrapper .react-colorful{border:1px solid var(--border-color);border-radius:12px;width:100%;height:250px;box-shadow:0 4px 12px #0000000d}.ColorConverterClient-module__xHJfOa__pickerWrapper .react-colorful__pointer{border:3px solid #fff;width:24px;height:24px;box-shadow:0 2px 8px #0000004d}:is(.ColorConverterClient-module__xHJfOa__pickerWrapper .react-colorful__hue,.ColorConverterClient-module__xHJfOa__pickerWrapper .react-colorful__alpha){border-radius:8px;height:16px}.ColorConverterClient-module__xHJfOa__sectionTitle{font-size:var(--text-base);color:var(--text-primary);align-items:center;gap:8px;margin-bottom:12px;font-weight:600;display:flex}.ColorConverterClient-module__xHJfOa__formatList{flex-direction:column;gap:12px;display:flex}.ColorConverterClient-module__xHJfOa__formatRow{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;align-items:center;gap:16px;padding:12px 16px;transition:all .2s;display:flex}.ColorConverterClient-module__xHJfOa__formatRow:hover{border-color:var(--accent-primary);box-shadow:0 4px 12px rgba(var(--accent-primary-rgb), .1)}.ColorConverterClient-module__xHJfOa__formatLabel{width:50px;font-weight:600;font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.ColorConverterClient-module__xHJfOa__formatValue{font-family:var(--font-mono);font-size:var(--text-base);color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;width:100%;min-width:0}.ColorConverterClient-module__xHJfOa__formatValue:focus{border-bottom:1px solid var(--accent-primary);outline:none;margin-bottom:-1px}.ColorConverterClient-module__xHJfOa__copyButton{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.ColorConverterClient-module__xHJfOa__copyButton:hover{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}