.page-module__4fhnvW__toolInterface{gap:var(--space-6);grid-template-columns:1fr;display:grid}@media (min-width:768px){.page-module__4fhnvW__toolInterface{grid-template-columns:1fr 1fr}}.page-module__4fhnvW__panel{background-color:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-xl);padding:var(--space-6)}.page-module__4fhnvW__fullWidth{grid-column:1/-1}.page-module__4fhnvW__panelTitle{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-4)}.page-module__4fhnvW__colorPreview{border-radius:var(--radius-lg);width:100%;height:200px;font-size:var(--text-2xl);font-weight:var(--font-bold);font-family:var(--font-mono);transition:background-color var(--transition-normal);margin-bottom:var(--space-4);justify-content:center;align-items:center;display:flex}.page-module__4fhnvW__colorActions{gap:var(--space-3);margin-bottom:var(--space-4);display:flex}.page-module__4fhnvW__colorActions button{flex:1}.page-module__4fhnvW__colorPicker{gap:var(--space-2);flex-direction:column;display:flex}.page-module__4fhnvW__pickerLabel{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary)}.page-module__4fhnvW__nativeColorPicker{border:1px solid var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;background:0 0;width:100%;height:48px;padding:0}.page-module__4fhnvW__nativeColorPicker::-webkit-color-swatch-wrapper{padding:4px}.page-module__4fhnvW__nativeColorPicker::-webkit-color-swatch{border-radius:var(--radius-md);border:none}.page-module__4fhnvW__colorFormat{margin-bottom:var(--space-4)}.page-module__4fhnvW__colorFormat:last-child{margin-bottom:0}.page-module__4fhnvW__formatLabel{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);margin-bottom:var(--space-2);display:block}.page-module__4fhnvW__formatInput{gap:var(--space-2);align-items:center;display:flex}.page-module__4fhnvW__formatInput input{flex:1}.page-module__4fhnvW__rgbInputs{gap:var(--space-2);align-items:center;display:flex}.page-module__4fhnvW__rgbField{gap:var(--space-1);flex-direction:column;flex:1;display:flex}.page-module__4fhnvW__rgbField span{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--text-tertiary);text-align:center}.page-module__4fhnvW__rgbField input{text-align:center;padding:var(--space-2)}.page-module__4fhnvW__savedColors{gap:var(--space-3);flex-wrap:wrap;display:flex}.page-module__4fhnvW__savedColor{border-radius:var(--radius-lg);cursor:pointer;width:60px;height:60px;transition:transform var(--transition-fast);border:2px solid var(--border-primary);position:relative}.page-module__4fhnvW__savedColor:hover{transform:scale(1.1)}.page-module__4fhnvW__removeColor{background:var(--bg-error);color:#fff;cursor:pointer;opacity:0;width:20px;height:20px;transition:opacity var(--transition-fast);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:14px;line-height:1;display:flex;position:absolute;top:-8px;right:-8px}.page-module__4fhnvW__savedColor:hover .page-module__4fhnvW__removeColor{opacity:1}.page-module__4fhnvW__variations{gap:var(--space-2);display:flex;overflow-x:auto}.page-module__4fhnvW__variation{border-radius:var(--radius-lg);cursor:pointer;min-width:80px;height:80px;font-size:var(--text-sm);font-weight:var(--font-medium);transition:transform var(--transition-fast);border:1px solid var(--border-primary);flex:1;justify-content:center;align-items:center;display:flex}.page-module__4fhnvW__variation:hover{transform:scale(1.05)}@media (max-width:640px){.page-module__4fhnvW__colorPreview{height:150px;font-size:var(--text-xl)}.page-module__4fhnvW__colorActions{flex-direction:column}.page-module__4fhnvW__rgbInputs{flex-wrap:wrap}.page-module__4fhnvW__rgbField{min-width:60px}.page-module__4fhnvW__savedColor{width:50px;height:50px}.page-module__4fhnvW__variation{min-width:60px;height:60px;font-size:var(--text-xs)}}